/**
 * Created by xt on 2017/3/29.
 */
import React, { Component } from 'react'
import { Link } from 'react-router';

import Pie from '../../components/pie'
import Funnel from '../../components/funnel'
import Line from '../../components/line'
import NoData from '../../components/noData'

import './report.scss'


const styles = {
  pTitle: {
    color: '#9B9B9B',
    marginBottom: '.3rem',
    paddingLeft: '.32rem'
  }
};

class Report extends Component {
  constructor (props) {
    super(props);
    this.state = {
      info: {
        people: [],
        please: {
          name: '',
          ratio: null
        },
        pleaseRank: [],
      }
    }
  }
  componentWillMount () {
    var userJsonStr = sessionStorage.getItem('info');
    let userEntity = JSON.parse(userJsonStr);
    this.setState({
      info : userEntity
    });
    console.log(userEntity);
  }
  render () {
    return (
      <div >
        <div className="ab-top-box">
          <p className="re-top-mark">本报告由<a href="http://dwz.cn/5HxHRR">志愿百科</a>提供</p>
          <p className="re-top-title">成绩分析报告</p>
        </div>
        <div className="ab-midle-box">
          <div className="ab-midle-cont">
            <div className="top-bar"></div>
            <div className="content">
              <p className="re-point">{this.state.info.province}-{this.state.info.scoreName}</p>
              <div className="float re-top-info">
                  <div className="left">
                    <p><span>{this.state.info.score}</span>分</p>
                    <p>你的成绩</p>
                  </div>
                  <div className="left">
                    <p><span>{this.state.info.userRank}</span>名</p>
                    <p>全省排名</p>
                  </div>
              </div>
              {this.state.info.universitys.length > 0 && this.state.info.people[0].hasOwnProperty('name') ?
                <ul className="list-group re-list">
                  <li><i className="star left"></i><span className="left block-star">
                  你的分数可以考上<strong>{this.state.info.universitys[0].name}</strong>等<strong>{this.state.info.totalUniversityNumber}</strong> 所一本院校</span></li>
                  <li><i className="star left"></i><span className="left block-star">
                  近三年与你成绩相近的人当中，被<strong>{this.state.info.people[0].name}</strong>录取的考生最多<strong>（{this.state.info.people[0].people}人）</strong></span></li>
                </ul> :
                <NoData />
              }

            </div>
          </div>
        </div>
        <div className="ab-foot-box re-school-list-box">
          <h4>你被心仪大学录取的概率</h4>
          {this.state.info.please.ratio ?  <Pie data={this.state.info.please}/> : <NoData />}
           <p className="school-chance">往年{this.state.info.please.name}录取最低省排名（{this.state.info.province}－{this.state.info.scoreName}）</p>
          {this.state.info.pleaseRank.length > 0 ? <Line data={this.state.info.pleaseRank} userRank = {this.state.info.userRank} /> : <NoData />}
        </div>
        <div className="ab-foot-box re-school-list-box">
          <h4>根据你的成绩推荐以下学校</h4>
          {this.state.info.universitys.length > 0 ? <ul className="re-school-list">
            {
              this.state.info.universitys.map((item, index) => {
                return (
                  <li key={index}>
                    <div className="left school-logo">
                      <img src={item.logo} alt={item.name}/>
                    </div>
                    <div className="left school-info">
                      <p>{item.name}<span className="right">{item.city}</span></p>
                      <p>全国高校综合排名 <span>{item.rank}</span> <div className="right">录取概率&nbsp;&nbsp;<span>{(item.ratio)*100}%</span></div></p>
                    </div>
                  </li>
                )
              })
            }
          </ul> : <NoData />}
          <Link to="/about">
            <a className="a-link" href="javascript:;">查看其余 {this.state.info.totalUniversityNumber} 所推荐院校 <i className="blue-right-icon"></i> </a>
          </Link>
        </div>
        <div className="ab-foot-box re-school-list-box">
          <h4>往年与你成绩相近的人去了哪里</h4>
          <p style={styles.pTitle}>数据来源：近三年省排名在{this.state.info.userRank}名附近的考生录取去向</p>
          <p className="p-min-title"><span>&nbsp;</span>录取人数最多的5个<strong>学校</strong></p>
          {this.state.info.people.length > 0 ? <Funnel data={this.state.info.people}/> : <NoData />}
          <Link to="/about">
            <a className="a-link" href="javascript:;">查看更多同分考生去向 <i className="blue-right-icon"></i> </a>
          </Link>
        </div>
        <div className="footer">
          <Link to="/about">
            <a href="javascript:;">查看更完整的成绩分析报告<i className="right-icon"></i></a>
          </Link>
        </div>
      </div>
    )
  }

}
export default Report
